<template>
  <el-dialog
    :visible="visible"
    min-width="400"
    min-height="232"
    :width="width"
    class="dialog"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false">
    <div slot="title" class="title">
      <i class="icon iconfont iconicon_gaojing" style="color:#fe983d"></i>
      <p>{{title}}</p>
    </div>
    <div class="content" v-loading="loading">
      <slot name="content"></slot>
    </div>
    <div class="footer">
      <slot name="footer" class="dialog-footer"></slot>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'

@Component({
  name: 'confirmDialog'
})
export default class extends Vue {
  @Prop({ default: '' }) private title!: string
  @Prop({ default: true }) private visible!: boolean
  @Prop({ default: '0%' }) private width!: string
  @Prop({ default: false }) private loading!: boolean
  @Emit('handleClose') handleClose() {}

  private basicDialogSlots = this.$scopedSlots;

  @Watch('visible')
  private changeVal(val: any) {
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/_elementVariables.scss';

p {
  margin: 0;
  padding: 0;
}
.iconicon_gaojing::before {
  font-size: 20px;
}
.dialog {
  ::v-deep .el-dialog {
    min-width: 315px !important;
  }
 ::v-deep .el-dialog__header {
    padding: 30px 20px 0 30px;

    .el-dialog__headerbtn {
      display: none;
    }

    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .iconicon_gaojing {
        display: block;
        width: 20px;
        height: 21px;
        line-height: 1;
        margin-right: 8px;
        font-size: 21px;
      }

      p {
        height: 21px;
        line-height: 21px;
        color: $--color-assist-default-text;
        font-size: $--nav-font-size;
        font-weight: 600;
      }
    }
  }
::v-deep .el-dialog__body {
  padding: 0;

  .content {
    padding: 10px 58px 30px 58px;

    p {
      font-size: $--nav-font-size;
      color: $--color-assist-default-text;
      padding: 0;
      margin: 0;
      height: auto;
      word-break:break-all;
      word-wrap:break-word;
      line-height: 150%;
      min-height: 18px;
    }
    ul {
      padding: 0;
      margin: 0;
      padding-left: 30px;
      margin: 5px 0;

      li {
        margin-bottom: 5px;
        color: $--color-assist-value-text;
        font-size: $--text-font-size;
      }

      li:last-child {
        margin-bottom: 0;
      }
    }
  }
  .footer {
    padding: 0 20px 14px 0;
    display: flex;
    justify-content: flex-end;
  }
}
}
</style>
